<template>

    <div id="container">
        {{ message }}
        <ul>
            <li v-for="comment in commentList" :key="comment.id">
                <span>{{ comment.commentTxt }} </span> <span>{{ comment.createAt }}</span>
            </li>
        </ul>
        <button @click="getComment">Get方法</button>
        <br><br>
        <button @click="getSelect">Get登录</button>
    </div>



</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            message: '',
            commentList: [],
        }
    },
    created() {
        // axios.get('api/comment.json')
        //     .then(response => {
        //         console.log(response.data)
        //         this.message = response.data.message
        //         this.commentList = response.data.data.commentList;
        //         this.status = response.data.status
        //         console.log(this.message);
        //         console.log(this.commentList);
        //         console.log(this.status);
        //     })
        //     .catch(error => {
        //         console.log(error)
        //     })
    },
    methods: {
        getComment() {
            axios.get('api/comment.json')
                .then(response => {
                    console.log(response.data)
                    this.message = response.data.message
                    this.commentList = response.data.data.commentList;
                    this.status = response.data.status
                    console.log(this.message);
                    console.log(this.commentList);
                    console.log(this.status);
                })
                .catch(error => {
                    console.log(error)
                })
        },
        getSelect() {
            console.log('登录');
            axios.post('http://localhost:8080/admin/login', { username: 'admin', password: '123456' }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
                .then(response => {
                    console.log(response.data)
                })
                .catch(error => {
                    console.log(error)
                })
        }
    }
}
</script>
<style>
ul {
    list-style: none;
}

span {
    padding: 0 30px 0 0;
}
</style>